<template>
  <div class="login">
    <div class="titleimgbox">
      <img v-if="lang == 'en'" class="titleimg" src="../../static/image/logintitleen.png" alt="">
      <img v-else class="titleimg" src="../../static/image/logibtitle.png" alt="">

    </div>

    <div class="contentbox">
      <div class="contentLeft">
        <img class="loginimg" src="../../static/image/loginimg.png" alt="">

      </div>
      <!-- 登录 -->
      <div class="contentRight">
        <div class="contentRighttitle">{{ $t('assemble.登录') }}</div>

        <div class="btnBox">
          <div class="btn" :class="{ btned: currIndex == '1' }" @click="handleBtned('1')">{{ $t('assemble.手机号登录') }}</div>
          <div class="btn" :class="{ btned: currIndex == '2' }" @click="handleBtned('2')">{{ $t('assemble.邮箱登录') }}</div>
        </div>

        <div class="loginbox">
          <el-form ref="loginForm" :model="loginForm" label-position="top">

            <el-form-item v-if="currIndex == '1'" :label="this.$t('assemble.手机号登录')">
              <el-input class="inputFlag" v-model="loginForm.moblieoremail"
                :placeholder="this.$t('assemble.请输入手机号')"></el-input>
              <img class="canadaimg" src="../../static/image/canada.png" alt="">

            </el-form-item>
            <el-form-item v-else :label="this.$t('assemble.邮箱登录')">
              <el-input v-model="loginForm.moblieoremail" :placeholder="this.$t('assemble.请输入邮箱地址')"></el-input>
            </el-form-item>
            <!-- <el-form-item label="手机号/邮箱地址">
              <el-input v-model="loginForm.moblieoremail" placeholder="请输入手机号/邮箱地址"></el-input>
            </el-form-item> -->

            <el-form-item v-if="numberorcodeFlage" :label="this.$t('assemble.密码')">
              <el-input v-model="loginForm.password" :placeholder="this.$t('assemble.请输入密码')" show-password></el-input>
            </el-form-item>
            <el-form-item v-else :label="this.$t('assemble.验证码')">
              <el-input v-model="loginForm.authcode" :placeholder="this.$t('assemble.请输入验证码')"></el-input>
              <p v-if="codeFlag" class="sendcode" @click="handlesendcode">{{ $t('assemble.发送验证码') }}</p>
              <p v-else class="gain">
                {{ time }}s
              </p>

            </el-form-item>
          </el-form>

          <div class="type">
            <div class="automatic" @click="handleAutomaticlogin">
              <div class="automaticimg">
                <img v-if="AutomaticloginFlag" src="../../static/image/kong.png" alt="">
                <img v-else src="../../static/image/shi.png" alt="">
              </div>
              <div class="automatictext">
                {{ $t('assemble.自动登录') }}
              </div>
            </div>
            <div class="logintype">
              <div>
                <p v-if="numberorcodeFlage" @click="handlenumberorcode">{{ $t('assemble.验证码登录') }} </p>
                <p v-else @click="handlenumberorcode">{{ $t('assemble.账号登录') }} </p>
              </div>
              <p @click="gotoregister">{{ $t('assemble.注册账号') }} </p>
            </div>
          </div>

          <div class="Forgetpassword" @click="gotoforgetpassword">
            {{ $t('assemble.忘记密码') }}
          </div>
          <div class="loginbtn" @click="handlelogin">
            {{ $t('assemble.登录') }}
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { login, getmobileCode, getemailCode } from "../../utils/api.js"
import debounce from '@/utils/debounce.js';
export default {
  data() {
    return {
      loginForm: {
        moblieoremail: '',
        password: '',
        authcode: ''
      },
      AutomaticloginFlag: true,
      numberorcodeFlage: true,
      currIndex: "1",
      codeFlag: true,
      time: 60,
      interval: null,
      lang: ""


    }
  },
  created() {
    console.log(" this.$i18n.locale ", this.$i18n.locale)
    // this.lang = this.$i18n.locale
    if(localStorage.getItem("langtype")){
      this.$i18n.locale = localStorage.getItem("langtype")
      this.lang = localStorage.getItem("langtype")
    }else{
      this.$i18n.locale = 'en'
      this.lang = 'en'
    }
    // console.log("999",localStorage.getItem("token"))
    if (localStorage.getItem("token")) {
      this.$router.push({ path: '/mine' })
    }

  },
  methods: {
    async handlesendcode() {
      this.codeFlag = false
      let that = this
      that.interval = window.setInterval(function () {
        if ((that.time--) <= 0) {
          that.codeFlag = true
          that.time = 60
          window.clearInterval(that.interval)
        }
      }, 1000)

      if (that.currIndex == '1') {
        let res = await getmobileCode({
          mobile: '1' + this.loginForm.moblieoremail,
        })
        if (res.code == 1000) {
          this.$message({
            message: '验证码已发送，请注意查收！',
            type: 'success'
          });
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }

      } else {

        let res = await getemailCode({
          email: this.loginForm.moblieoremail,
        })
        if (res.code == 1000) {
          this.$message({
            message: '验证码已发送，请注意查收！',
            type: 'success'
          });
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }


      }



    },
    handleBtned(e) {
      this.currIndex = e
      this.loginForm.moblieoremail = ""
      this.codeFlag = true
      window.clearInterval(this.interval)
      this.time = 60
    },
    handleAutomaticlogin() {
      this.AutomaticloginFlag = !this.AutomaticloginFlag
    },
    handlenumberorcode() {
      this.numberorcodeFlage = !this.numberorcodeFlage
      // console.log("this.numberorcodeFlage",this.numberorcodeFlage)
    },
    gotoregister() {
      this.$router.push({ path: '/register' })
    },
    gotoforgetpassword() {
      this.$router.push({ path: '/forgetpassword' })
    },

    handlelogin() {
      debounce(() => {
        this.handlelogins()
      }, 500)
    },

    async handlelogins() {
      let data = {}
      if (this.numberorcodeFlage) {
        data = {
          type: this.currIndex,
          username: '1' + this.loginForm.moblieoremail,
          password: this.loginForm.password,
          // code: this.loginForm.authcode,
        }
      } else {
        // console.log("eamil")
        data = {
          type: this.currIndex,
          username: this.loginForm.moblieoremail,
          // password:this.loginForm.password,
          code: this.loginForm.authcode,
        }
      }

      let res = await login(data)
      if (res.code == 1000) {
        console.log("登录", res)
        this.$message({
          message: res.message,
          type: 'success'
        });
        localStorage.setItem("token", res.data.token)
        this.$router.push({ path: '/mine' })
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        });
      }
    }
  }
}

</script> 

<style scoped lang="scss">
::v-deep .el-date-editor.el-input__inner {
  height: 37px;
  background-color: #F7F8FA;
}

::v-deep .el-date-editor .el-range-input {
  // height: 50px;
  background-color: #F7F8FA;
}

::v-deep .el-input__inner {
  border: none;
  border-radius: 10px;
  background-color: #F7F8FA;

}

.btnBox {
  width: 188px;
  display: flex;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 13px;

  .btn {
    width: 75px;
    height: 30px;
    border-radius: 10px;
    background-color: #F7F8FA;
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
    cursor: pointer;
  }

  .btned {
    background-color: #0057A7;
    color: #FFFFFF;
  }
}

.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../static/image/backimg.png");
  background-size: 100% 100%;
}

.titleimgbox {
  width: 471px;
  height: 55px;
  padding-top: 75px;
  margin: 0px auto;

  .titleimg {
    width: 470px;
    height: 55px;
  }
}

.contentbox {
  width: 900px;
  height: 508px;
  background: linear-gradient(90deg, #DDEFFF 0%, #FFFFFF 60%);
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;

  .contentLeft {
    // width: 495px;
    height: 509px;
    padding-top: 140px;
    padding-left: 70px;
    box-sizing: border-box;

    .loginimg {
      width: 369px;
      height: 229px;
    }
  }

  .contentRight {
    width: 335px;
    height: 509px;
    // background-color: pink;
    padding-top: 45px;
    padding-right: 45px;
    box-sizing: border-box;

    .contentRighttitle {
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 27px;
    }

    .loginbox {
      // margin-top: 40px;
      position: relative;

      .inputFlag {

        // text-indent: 30px;
        ::v-deep .el-input__inner {
          text-indent: 20px;
        }
      }

      .sendcode {
        // width: 82.5px;
        height: 22.5px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #0057A7;
        font-size: 11px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0057A7;
        line-height: 22.5px;
        text-align: center;
        position: absolute;
        top: -4px;
        right: 7.5px;
        cursor: pointer;
        padding: 0 5px;
      }

      .canadaimg {
        width: 20px;
        height: 15px;
        position: absolute;
        left: 5px;
        top: 13px;
      }

      .gain {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0057A7;
        line-height: 16px;
        position: absolute;
        top: -4px;
        right: 7.5px;
        cursor: pointer;
      }
    }

    .type {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      .automatic {
        display: flex;
        // align-items: center;
        cursor: pointer;

        .automaticimg {
          width: 10.5px;
          height: 10.5px;
        }

        .automatictext {
          font-size: 11px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 14px;
          margin-left: 7px;
        }
      }

      .logintype {
        font-size: 11px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0057A7;
        line-height: 14px;

        p {
          cursor: pointer;
        }
      }
    }

    .Forgetpassword {
      width: 100%;
      text-align: center;
      // width: 48px;
      height: 16.5px;
      font-size: 11px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #0057A7;
      line-height: 16.5px;
      margin: 0 auto;
      // margin-top: 65px;
      cursor: pointer;
    }

    .loginbtn {
      width: 270px;
      height: 37px;
      background: #0057A7;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      font-size: 13px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 37px;
      text-align: center;
      margin: 20px auto;
      cursor: pointer;
    }
  }


}
</style>